<template>
	<view class="content">
		<ugo-search/>
		<swiper
				indicator-dots
				autoplay
				circular
				class="m-swiper"
			>
				<swiper-item v-for="item in swiperList" :key="item.goods_id">
					<image
						:src="item.image_src"
						mode="scaleToFill"
					/>
				</swiper-item>
		</swiper>
		<view class="m-navibar">
			<view v-for="item in navibarList" :key="item.name">
			<navigator
			v-if="item.name==='分类'"
				url="/pages/category/index"
				open-type="switchTab"
				hover-class="none"
			>
				<image
					:src="item.image_src"
					mode="scaleToFill"
				/>
			</navigator>
			<image
			v-else
				:src="item.image_src"
				mode="scaleToFill"
			/>	
			</view>
		</view>
		<view class="m-floor">
			<view class="floor" v-for="(item,index) in floorList" :key="index">
				<image
				class="floor-title"
					:src="item.floor_title.image_src"
					mode="scaleToFill"
				/>
				<view class="product-list" >
					<image
					v-for="goods in item.product_list" :key="goods.name"
						:src="goods.image_src"
						mode="heightFix"
						
					/>
					
					<!-- <image
						src="https://api-hmugo-web.itheima.net/pyg/pic_floor01_2@2x.png"
						mode="heightFix"
						v-for="item in 4" :key="item"
					/> -->
				</view>
					

			</view>
		</view>
	</view>
</template>


<script>
import MyImage from '../../components/my-image.vue'
import UgoSearch from '../../components/ugo-search/ugo-search.vue'

	export default {
		components:{
			MyImage,
UgoSearch,
		},
		data() {
			return {
				title: 'Hello',
				disabled:false,
				swiperList:[],
				navibarList:[],
				floorList:[]
			}
		},
		async onLoad() {
			this.getSwiperList()
			this.getNavibarList()
			this.getFloorList()
		},
		methods: {
			async getSwiperList(){
				const res= await uni.$u.http.get("/home/swiperdata")
				console.log(res);
				this.swiperList=res.data.message
			},
			async getNavibarList(){
				const res= await uni.$u.http.get("/home/catitems")	
				console.log(res);
				this.navibarList=res.data.message
				
			},
			async getFloorList(){
				const res= await uni.$u.http.get("/home/floordata")
				console.log(res);
				this.floorList=res.data.message
				
			},
			// 下拉刷新
	async onPullDownRefresh() {
		// 清空数据
		this.keyword = '';
		this.swiperList = [];
		this.navibarList = [];
		this.floorList = [];

		// 发送请求
		await Promise.all([this.getSwiperList(), this.getNavibarList(), this.getFloorList()]);
		uni.stopPullDownRefresh();
	}
		}
	}
</script>

<style lang="scss" >

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.m-swiper{
		width: 750rpx;
		height: 340rpx;
		image{
			width: 100%;
		}
	}
	.m-navibar{
		display: flex;
		margin: 12rpx 30rpx;
		justify-content: space-between;
		image{
			width: 128rpx;
			height: 140rpx;
		}
	}
	.m-floor {
		.floor-title {
			margin-top: 43rpx;
			width: 750rpx;
			height: 60rpx;
		}
		.product-list {
			image {
				float: left;
				height: 188rpx;
				margin-left: 12rpx;
				margin-bottom: 10rpx;
				&:first-child {
					height: 386rpx;
				}
			}
		}
	}
</style>
